@extends('layouts.default') @section('css')
{{--<link rel="stylesheet" href="{{asset('admin-lte/plugins/datatables/dataTables.bootstrap4.css')}}">--}}


<link rel="stylesheet" type="text/css" href="{{asset('css/eleui-theme-chalk.css')}}">
<!-- 引入样式 -->
<link rel="stylesheet" href="{{asset('css/iview.css')}}">
<!-- 引入组件库 -->

<link rel="stylesheet" href="{{asset('css/order/index.css')}}"> {{--

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}} @stop @section('content')
    <div class="row">
        <div class="col-12">

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">订单列表</h3>
                </div>
                @include('layouts.message')
                <!-- /.card-header -->
                <div class="card-body">
                    @verbatim
                    <div class="ivu-card ivu-card-bordered " id="order">
                        <div class="search">
                            <el-form :inline="true" class="demo-form-inline">
                                <el-form-item style="margin-right:0;" label="酒店">
                                    <el-select v-model="search.hotel_id" placeholder="请选择酒店" >
                                        <el-option key="0" value="0" label="选择酒店"></el-option>
                                        <el-option v-for="item in hotelList" :key="item.hotel_id" :label="item.name" :value="item.hotel_id"> </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item style="margin-right:0;" label="房间号">
                                    <el-input v-model="search.room_num" placeholder="房间号"></el-input>
                                </el-form-item>
                                <el-form-item style="margin-right:0;" label="订单号">
                                    <el-input v-model="search.input" placeholder="请输入订单号"></el-input>
                                </el-form-item>
                                <el-form-item style="margin-right:0;">
                                    <el-date-picker
                                            v-model="search.date_arr"
                                            type="daterange"
                                            align="right"
                                            unlink-panels
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            :picker-options="pickerOptions">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item @click.native="searchOrder">
                                    <el-button  type="primary">搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    	<!-- 状态筛选列 -->
                        <div class="one">
                            <div class="select-order-type">
                                <ul>
                                    <template  v-for="(item,index) in orderStateTxt" v-if="item">
                                        <li @click="switch_status(index)" :key="index" :class="{active:selectOrderTypeState==index}" v-html="item"></li>
                                    </template>

                                </ul>
                            </div>
                        </div><!-- 状态筛选列-结束 -->

                        <el-table :data="tableData5" style="width: 100%" @expand-change="expand" :row-key="getRowKeys" :expand-row-keys="expands_row_keys">
                        	<!-- 展开列 -->
                            <el-table-column type="expand" label="操作" >
                                <template slot-scope="props">
                                	<!-- 订单操作开始 -->
                                    <el-row class="one">
                                        <el-col :span="24">
                                            <el-form :inline="true" class="demo-form-inline" :size="'mini'">
                                                <el-form-item>
                                                    <span>订单详情</span>
                                                </el-form-item>
                                                <el-form-item>
                                                    <template v-for="(buttonShow,buttonEnName) of orderDetail.admin_button_list">
                                                        <el-button type="primary" :disabled="buttonShow==0" @click="triggerButton(buttonEnName,orderDetail)">{{orderDetail.admin_button_maps[buttonEnName]}}</el-button>
                                                    </template>
                                                </el-form-item>
                                            </el-form>
                                        </el-col>
                                    </el-row><!-- 订单操作结束处 -->

                                    <!-- 选项卡切换处开始 -->
                                    <el-tabs v-model="activeName">
                                    	<!-- 订单,收货,会员三张卡片存放处开始 -->
                                        <!-- 基本商品信息开始 -->
                                        <el-tab-pane label="商品" name="second">
                                            <el-card class="box-card" shadow="hover" >
                                                <div slot="header" class="clearfix"><!-- 基本商品信息开始-->
                                                    <span>商品</span>
                                                </div>
                                                <el-table  border :data="orderDetail.goods_list"  style="width: 100%">
                                                  <el-table-column prop="goods_name" label="商品名称" width="180">
                                                  </el-table-column>
                                                  <el-table-column label="图片" width="180">
                                                      <template slot-scope="sku">
                                                          <img style="max-width:100px" :src="sku.row.image" alt="">
                                                      </template>
                                                  </el-table-column>
                                                    <el-table-column  prop="price" label="单价"> </el-table-column>
                                                    <el-table-column  prop="goods_number" label="购买数量"></el-table-column>
                                                    <el-table-column  label="小计">
                                                        <template slot-scope="sku">
                                                            {{parseFloat(sku.row.price)*parseInt(sku.row.goods_number)}}
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </el-card><!-- 基本商品信息结束 -->
                                        </el-tab-pane>
                                    </el-tabs><!-- 选项卡切换处结束 -->
                                </template>
                            </el-table-column><!-- 展开列 -->
                            <el-table-column label="订单号" prop="order_sn">
                            </el-table-column>
                            <el-table-column label="酒店" prop="hotel_name">
                            </el-table-column>
                            <el-table-column label="房间号" prop="room_num">
                            </el-table-column>
                            <el-table-column label="订单总额" prop="money_paid">
                            </el-table-column>
                            <el-table-column label="付款状态" prop="pay_status">
                            </el-table-column>
                            <el-table-column label="下单时间" prop="order_time">
                            </el-table-column>
                        </el-table>

						<!-- 分页存放处 -->
                        <el-pagination
                                background
                                layout="total, prev, pager, next"
                                :total="pagination.total"
                                :page-size="pagination.page_sizes"
                                @current-change="page"
                        >
                        </el-pagination><!-- 分页存放处结束 -->

                    </div>
                    @endverbatim
                        <input id="hotel_list" type="hidden" value="{{json_encode($hotel_list)}}">
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

    @stop @section('script')
    <script type="text/javascript" src="{{asset('js/vue.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/view.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/element-ui.js')}}"></script>
    <script src="{{asset('js/axios.js')}}"></script>

    <script>
    //打开vue开发模式便于使用devTools调试
    Vue.config.devtools = true;
    var href            = "{{url('admin/order/ajax_list')}}",
        ExpressUrl      = "{{url('admin/order/getExpress')}}";
        detailHref      = "{{url('admin/order/detail')}}";
        complete        = "{{url('admin/order/complete')}}";
        send            = "{{url('admin/order/send')}}";

    var service=axios.create({
        timeout:5000,
        baseURL : 'http://temp.iceqiqi.com/admin',
        headers:{
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
    });
    new Vue({
        el: '#order',
        created(){
            var that = this;
            this.hotelList = JSON.parse(document.getElementById('hotel_list').value);
            that.getOrderList(href,{status:0});
        },
        data: {
            selectOrderTypeState: 0,
            activeName:'second',
            orderPutState:false,//订单发货modal框
            //全部-0 待发货-1 已发货-2 待支付-3 已支付-4 已作费-5 已完成-6 申请退款-7 已拒绝退款-8 申请退货-9 已拒绝退货-10
            orderStateTxt: ['全部',,,'待支付', '已支付', '已作废', '已完成' ],
            options: [{
                value: 1,
                label: '订单号'
            }],
            search: {
                room_num:'',
                hotel_id:'',
                value: "0",
                input: '',
                date_arr:[],
            },
            //订单列表
            tableData5: [],
            //订单详情
            orderDetail:[],
            //搜索堆箱
            pagination:{
                page_sizes:15,
                total:0,
            },
            //订单列表展开状态管理对象
            orderExpand:{

            },
            expands_row_keys:[],
            //物流公司列表
            ship_company_list:[],
            //发货表单提交数据
            shipFormData:{
                express_encode : '',
                express_company: '',
                express_no     : '',
                order_sn       : '',
            },
            buttonMethodMaps:{
               'agree_refund' : 'agree_refund', //同意退款
               'agree_shipback' : 'agree_shipback',//同意退货
               'reject_refund'  : 'reject_refund',//拒绝退款
               'reject_shipback':'reject_shipback',//拒绝退货
               'ship_goods':'orderPut', //发货
            },
            hotelList:[],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        },
        methods: {
            show: function() {},
            getRowKeys(row){
              return row.order_id;
            },
            handleClick(tab, event){
                console.log(tab, event);
            },

            //同意确认发货回调事件
            confirm_orderput(){
                var that = this;
                this.shipFormData.order_sn = this.orderDetail.order_sn;
                this.send(this.shipFormData,function(res){
                    if(res.ret == 200){
                        that.orderPutState = false;
                        that.$message({
                            message: '发货成功',
                            type: 'success'
                        });
                        //重新加载列表
                        that.getOrderList(href,that.search);
                    }else{
                        that.confirm(res.msg);
                    }
                });
            },

            //点击发货按钮
            orderPut(orderDetail){
                this.orderPutState = true;
            },

            //同意退款
            agree_refund:function(orderDetail){
                var that = this;
                that.confirm('确认要同意退款?',function(){
                    let data = {'pay_status':4,order_sn:that.orderDetail.order_sn};
                    that.complete(data,function(res){
                        if(res.ret == 200){
                            that.$message({
                                message: '退款成功',
                                type: 'success'
                            });
                            //重新加载列表
                            that.getOrderList(href,that.search);
                        }else{
                            that.confirm(res.msg);
                        }
                    });
                });
            },

            //拒绝退款
            reject_refund(orderDetail){
                var that = this;

                this.$prompt('请输入理由', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',

                }).then((val)=>{
                    console.log(val);
                    let data = {'pay_status':5,order_sn:that.orderDetail.order_sn,'reject_refund_reason':val.value};

                                      that.complete(data,function(res){
                                          if(res.ret == 200){
                                              that.$message({
                                                  message: '已拒绝退款',
                                                  type: 'success'
                                              });
                                              //重新加载列表
                                              that.getOrderList(href,that.search);
                                          }else{
                                              that.confirm(res.msg);
                                          }
                                      });
                }).catch (()=>{
                    this.$message({
                        type   : 'info',
                        message: '已取消'
                    });
                })
    //                this.confirm('确认要拒绝退款?',function(){
    //                    console.log(123213);
    //                    //调用接口
    //
    //                })

            },

            //拒绝退货
            reject_shipback:function(orderDetail){
                var that = this;

                this.$prompt('请输入理由', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',

                }).then((val)=>{
                    console.log(val);
                    let data = {'shipping_status':5,order_sn:that.orderDetail.order_sn,'reject_return_back':val.value};
                                      that.complete(data,function(res){
                                          if(res.ret == 200){
                                              that.$message({
                                                  message: '已拒绝退货',
                                                  type: 'success'
                                              });
                                              //重新加载列表
                                              that.getOrderList(href,that.search);
                                          }else{
                                              that.confirm(res.msg);
                                          }
                                      });
                }).catch (()=>{
                    this.$message({
                        type   : 'info',
                        message: '已取消'
                    });
                })
                //
                // var that = this;
                // this.confirm('确认要拒绝退货?',function(){
                //     //调用接口
                //     let data = {'shipping_status':5,order_sn:that.orderDetail.order_sn};
                //     that.complete(data,function(res){
                //         if(res.ret == 200){
                //             that.$message({
                //                 message: '已拒绝退货',
                //                 type: 'success'
                //             });
                //             //重新加载列表
                //             that.getOrderList(href,that.search);
                //         }else{
                //             that.confirm(res.msg);
                //         }
                //     });
                // })



            },

            //同意退货
            agree_shipback:function(orderDetail){
                var that = this;
                this.confirm('确认要同意退货?',function(){
                    //调用接口
                    let data = {'shipping_status':4,order_sn:that.orderDetail.order_sn};
                    that.complete(data,function(res){
                        if(res.ret == 200){
                            that.$message({
                                message: '同意退货成功',
                                type: 'success'
                            });
                            //重新加载列表
                            that.getOrderList(href,that.search);
                        }else{
                            that.confirm(res.msg);
                        }
                    });
                })
            },
            //触发按钮
            triggerButton:function(buttonNames,orderDetail){
                this[this.buttonMethodMaps[buttonNames]](orderDetail);
            },
            //切换状态
            switch_status(status){
                var that = this;
                that.selectOrderTypeState = status;
                this.search.status = status;
                this.search.input = '';
                this.getOrderList(href,{status:status});
                this.clearExpandStatus();
                this.expands_row_keys = [];
            },
            //获取订单列表
            getOrderList(href,params){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                var that = this;
                for(var key in params){
                    if(href.indexOf('?')<0){
                        href+='?'+key+'='+params[key];
                    }else{
                        href+='&'+key+'='+params[key];
                    }
                }
                service.get(href)
                    .then(res => {
                    loading.close();
                    that.tableData5 = res.data.data.list;
                    that.pageHtml = res.data.data.page;
                    that.pagination.page_sizes = parseInt(res.data.data.page_size);
                    that.pagination.total     = parseInt(res.data.data.total);
                    console.log(that.pagination)
            })
            },

            //获取订单详情接口
            getOrderDetail(detail_href,order_id) {
                var that = this;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                service.get(detail_href + '?order_id=' + order_id)
                    .then(res => {
                        loading.close();
                        // that.orderDetail = res.data.data;
                        that.orderDetail = res.data.data;
                    })
            },

            //搜索
            searchOrder:function(){
                //重置到第一页
                this.search.page = 1;
                this.search.status = this.selectOrderTypeState;
                this.getOrderList(href,this.search);
                this.clearExpandStatus();
                this.expands_row_keys = [];
            },

            page:function(current_page){
              this.search.page = current_page;
              this.getOrderList(href,this.search);
            },
            //展开事件
            expand:function(row, expandedRows){
                if(expandedRows.length>0){
                    this.changeExpandStatus(expandedRows[0].order_sn,false);
                }
                //是其他行关闭，让本行打开
                if(this.expands_row_keys.length>0 && this.expands_row_keys[0] == row.order_id){
                    //本行关闭
                    this.expands_row_keys = [];
                }else{
                    this.expands_row_keys = [];
                    this.expands_row_keys.push(row.order_id);
                }

                //展开到关闭 不用调用接口
                if(this.check_order_expand_status(row.order_sn)){
                    this.changeExpandStatus(row.order_sn);
            	    return;
                }
                this.changeExpandStatus(row.order_sn);
                this.getOrderDetail(detailHref,row.order_id);
            },
            //测试该列是否展开
            check_order_expand_status:function(order_sn){
                if(order_sn in this.orderExpand){
                    return !!this.orderExpand[order_sn];
                }else{
                    return false;
                }
            },
            //更改展开的状态
            changeExpandStatus:function(order_sn,status){
                if(order_sn in this.orderExpand){
                    this.orderExpand[order_sn] = status === undefined ? !this.orderExpand[order_sn] : status ;
                }else{
                    this.orderExpand[order_sn] = status === undefined ? true : status;
                }
            },
            //清除展开的状态
            clearExpandStatus:function(order_sn){
                 var that = this;
                 for(var key in this.orderExpand){
                     delete this.orderExpand[key];
                 }
            },
            //确认弹框公共方法
            confirm:function(msg,callback){
                var that = this;
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                 }).then(function(){
                    if(typeof callback =='function'){
                        callback();
                    }
                }).catch(function(){
                    that.$message({
                        type   : 'info',
                        message: '已取消'
                    });
                });
            },
            /*
             *修改订单状态: kv 键值对
             *订单状态:order_status 0，未确认；1，已确认；2，已取消；3，无效；4，退货；
             *订单派送状态:order_status 0，未发货；1，已发货；2，已收货；3，备货中
             *支付状态:pay_status
             *
             *
             * $pay_status = [
                   '0'  => '未付款',
                   '1'  => '付款中',
                   '2'  => '已付款',
                   '3'  => '申请退款',
                   '4'  => '已退款',
                   '5'  => '驳回退款',
                ];
             *  $ship_status = [
                    '0' => '未发货',
                    '1' => '已发货',
                    '2' => '已收货',
                    '3' => '申请退货',
                    '4' => '退货成功',
                    '5' => '驳回退货',
                ];
             *
             *
                $order_status = [
                    '0'  => '未确认',
                    '1'  => '已确认',
                    '2'  => '已取消'
                ];
             *
             */
            complete:function (kv,callback) {
                complete = "{{url('admin/order/complete')}}";
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                for(var key in kv){
                    if(complete.indexOf('?')<0){
                        complete+='?'+key+'='+kv[key];
                    }else{
                        complete+='&'+key+'='+kv[key];
                    }
                }
                console.log(complete);

                 // loading.close();
                service.get(complete)
                    .then(res => {
                        loading.close();
                        if(typeof callback == 'function'){
                            callback(res.data);
                        }
                    })
            },
            //发货
            send:function (kv,callback) {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                for(var key in kv){
                    if(send.indexOf('?')<0){
                        send+='?'+key+'='+kv[key];
                    }else{
                        send+='&'+key+'='+kv[key];
                    }
                }
                service.get(send)
                        .then(res => {
                        loading.close();
                        if(typeof callback == 'function'){
                            callback(res.data);
                        }
                })
            },
        },
        computed:{
          OrderUserInfo(){
              //orderDetail.user_info.user_name
              if('user_info' in this.orderDetail){
                  return this.orderDetail.user_info.user_name;
              }else{
                  return '';
              }
          },
          //
          OrderUserNickname(){
                //orderDetail.user_info.user_name
                if('user_info' in this.orderDetail){
                    return this.orderDetail.user_info.user_nickname;
                }else{
                    return '';
                }
          },
          Orderis_vip:function(){
              if('user_info' in this.orderDetail){
                  return this.orderDetail.user_info.is_vip == 1 ? '是' : '否';
              }else{
                  return '';
              }
          },
          OrderUserSex:function(){
              if('user_info' in this.orderDetail){
                  return this.orderDetail.user_info.user_sex;
              }else{
                  return '';
              }
          },


        },
    })
    </script>
    @stop
